<!--  -->
<template>
  <div class="user-manage">
    <div class="query-form">
      <el-form ref="form" :inline="true" :model="queryForm">
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="queryForm.menuName" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="菜单状态" prop="menuState">
          <el-select v-model="queryForm.menuState">
            <el-option :value="1" label="正常"></el-option>
            <el-option :value="2" label="停用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getMenuList">查询</el-button>
          <el-button @click="handleReset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="handleAdd(1)">新增</el-button>
      </div>
      <el-table
        :data="menuList"
        row-key="_id"
        :tree-props="{ children: 'children' }"
      >
        <!-- <el-table-column width="55" /> -->
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        />
        <el-table-column label="操作" width="210">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleAdd(2, scope.row)"
              >新增</el-button
            >
            <el-button size="small" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" size="small" @click="handleDel(scope.row._id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="用户新增" v-model="showModal">
      <el-form
        ref="dialogForm"
        :model="menuForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="父级菜单" prop="parentId">
          <el-cascader
            v-model="menuForm.parentId"
            :options="menuList"
            :props="{ checkStrictly: true, value: '_id', label: 'menuName' }"
            clearable
          />
          <span>不选，则直接创建一级菜单</span>
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="menuForm.menuType">
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="menuForm.menuName" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item
          label="菜单图标"
          prop="icon"
          v-show="menuForm.menuType === 1"
        >
          <el-input v-model="menuForm.icon" placeholder="请输入图标名" />
        </el-form-item>
        <el-form-item
          label="路由地址"
          prop="path"
          v-show="menuForm.menuType === 1"
        >
          <el-input v-model="menuForm.path" placeholder="请输入路由地址" />
        </el-form-item>
        <el-form-item
          label="权限标识"
          prop="menuCode"
          v-show="menuForm.menuType === 2"
        >
          <el-input v-model="menuForm.menuCode" placeholder="请输入权限标识" />
        </el-form-item>
        <el-form-item
          label="组件路径"
          prop="component"
          v-show="menuForm.menuType === 1"
        >
          <el-input v-model="menuForm.component" placeholder="请输入组件路径" />
        </el-form-item>
        <el-form-item
          label="菜单状态"
          prop="menuState"
          v-show="menuForm.menuType === 1"
        >
          <el-radio-group v-model="menuForm.menuState">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer"></span>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, nextTick } from "vue";
import utils from "../utils/utils";

const { proxy } = getCurrentInstance();

const queryForm = ref({});

const menuList = ref([]);

const columns = ref([
  {
    label: "菜单名称",
    prop: "menuName",
    width: 150,
  },
  {
    label: "图标",
    prop: "icon",
  },
  {
    label: "菜单类型",
    prop: "menuType",
    formatter(row, column, value) {
      return {
        1: "菜单",
        2: "按钮",
      }[value];
    },
  },
  {
    label: "权限标识",
    prop: "menuCode",
  },
  {
    label: "路由地址",
    prop: "path",
  },
  {
    label: "组件路径",
    prop: "component",
  },
  {
    label: "菜单状态",
    prop: "menuState",
    width: 90,
    formatter(row, column, value) {
      return {
        1: "正常",
        2: "停用",
      }[value];
    },
  },
  {
    label: "创建时间",
    prop: "createTime",
    width: 160,
    formatter(row, column, value) {
      return utils.formateDate(new Date(value));
    },
  },
]);

const showModal = ref(false);

const menuForm = ref({
  parentId: [null],
  menuType: 1,
  menuState: 1,
});

const action = ref("");

const rules = ref({
  menuName: [
    { required: true, message: "请输入菜单名称", trigger: "blur" },
    { min: 2, max: 10, message: "长度在2-8个字符", trigger: "blur" },
  ],
});

const getMenuList = async () => {
  try {
    let list = await proxy.$api.getMenuList(queryForm.value);
    // console.log(list);
    menuList.value = list;
  } catch (error) {
    throw new Error(error);
  }
};
getMenuList();

const handleReset = (form) => {
  proxy.$refs[form].resetFields();
};

const handleAdd = (type, row) => {
  showModal.value = true;
  action.value = "add";
  if (type === 2) {
    menuForm.value.parentId = [...row.parentId, row._id].filter((item) => item);
  }
};

const handleEdit = async (row) => {
  showModal.value = true;
  action.value = "edit";
  await nextTick(() => {
    Object.assign(menuForm.value, row);
  });
};

const handleDel = async (_id) => {
  await proxy.$api.menuSubmit({_id, action: 'delete'});
  proxy.$message.success('删除成功')
  getMenuList()
};

const handleClose = () => {
  showModal.value = false;
  handleReset("dialogForm");
};

const handleSubmit = () => {
  proxy.$refs.dialogForm.validate(async (valid) => {
    if (valid) {
      let actions = action.value;
      let params = { ...menuForm.value, actions };
      // console.log("params", params);
      let res = await proxy.$api.menuSubmit(params);
      showModal.value = false;
      proxy.$message.success("操作成功");
      handleReset("dialogForm");
      getMenuList();
    }
  });
};
</script>
<style lang="scss"></style>
